<template>
    <div class="appointment-tiem">
        <div class="select-content">
            <div class="select-content-title">
                <div class="title"><span>选择服务人</span></div>
                <div class="but">
                    <el-button
                        size="mini"
                        v-show="serviceData.length == 0 || page_i == 4"
                        type="primary"
                        @click="selectService('1')"
                        >选择服务人</el-button
                    >
                </div>
            </div>
            <div class="content-box" v-show="serviceData.length > 0">
                <div
                    class="content-row"
                    v-for="(item, index) in serviceData"
                    :key="index"
                >
                    <div class="content-info-box">
                        <div class="info">
                            <div class="img-box">
                                <img
                                    :src="item.avatar ? item.avatar : img_buf"
                                    alt=""
                                />
                            </div>
                            <div class="content-info">
                                <div class="content-title">
                                    <span>{{ item.name }}</span>
                                    <span
                                        class="tag"
                                        v-if="
                                            item.positionname ||
                                            item.position_title
                                        "
                                        >{{
                                            item.positionname ||
                                            item.position_title
                                        }}</span
                                    >
                                </div>

                                <div class="content-phone" v-if="is_edit">
                                    <span
                                        >{{
                                            parseFloat(item.remark_score)
                                        }}分</span
                                    >
                                </div>
                                <div class="content-phone" v-else>
                                    <span>{{ item.cellphone }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="content-but">
                            <div class="but-box"></div>
                            <div class="but-box">
                                <el-button
                                    size="mini"
                                    @click="selectService('2', item)"
                                    >更改</el-button
                                >
                                <el-button
                                    size="mini"
                                    @click="delService(item)"
                                    type="danger"
                                    v-if="page_i == 4"
                                    >删除</el-button
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="select-content" v-show="timestrList.length > 0">
            <div class="select-content-title">
                <div class="title"><span>选择日期</span></div>
                <div class="but" v-if="page_i != 3 && page_show_i != 3">
                    <el-button size="mini" @click="batchFun">{{
                        is_batch ? "切换单选操作" : "切换批量操作"
                    }}</el-button>
                </div>
            </div>
            <div class="date-box">
                <div
                    class="date-row"
                    v-for="(item, index) in timestrList"
                    :key="index"
                    :class="item.is_acitve ? 'avitve' : ''"
                    @click="cheTimestr(item)"
                >
                    <div class="date-txt">{{ item.timestr_week }}</div>
                    <div class="date">{{ item.timestr_day }}</div>
                </div>
            </div>
        </div>
        <div class="select-content" v-show="hourList.length > 0">
            <div class="select-content-title">
                <div class="title"><span>选择时间</span> <span class="ps">( 长按取消选中时间 )</span></div>
                <div class="but" v-if="page_i == 3 || page_show_i == 3">
                    <div class="tis">
                        <span class="tis-2">可约</span>
                        <span class="tis-3">不可约</span>
                    </div>
                </div>
            </div>
            <div class="date-box">
                <div
                    class="date-row tiem"
                    v-for="(item, index) in hourList"
                    :key="index"
                    :class="[
                        item.is_acitve ? 'yas-avitve' : '',
                        !item.is_no_acitve && (page_i == 3 || page_show_i == 3)
                            ? 'no-avitve'
                            : '',
                    ]"
                    
                    @mousedown="gtouchstart(item, index)"  @mouseup="gtouchend(item, index)" @mousemove="gtouchmove()"

                >
                <!-- @click="cheHour(item, index)" -->
                    <div class="date">{{ item.hour_time }}</div>
                </div>
            </div>
        </div>
        <!-- 选择服务人 -->
        <popServiceSelect
            :page_i="page_i"
            :page_show_i="page_show_i"
            @getServiceData="getServiceData"
            @destroyEditing="destroyEditing"
            ref="popServiceSelect"
        ></popServiceSelect>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import popServiceSelect from "./popServiceSelect.vue";
import config from "@/js/conf/Config.js";

export default {
    components: { popServiceSelect },
    props: ["page_i", "is_edit", "page_show_i"],
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            serviceData: [], //服务人数据
            timestrList: [], //日期数据
            prepareHourList: [], //处理的时间数据
            hourList: [], //展示的时间数据
            hourAllow: [], //有效时间
            staffid: "", //已选服务人id
            selectIndex: [], //第一次选中时间的下标
            is_batch: false, //是否切换单选/批量操作
            selectType: "1", //选择服务人类型
            upid: "", //要更换的服务人id
            tlong: 0, //预约服务时间长度（分钟）
            is_destroy_editing: "1", //是否破坏服务人的编辑状态1=是；2=否
        };
    },
    methods: {
        initData() {
            this.emptyData();
            this.getBookWorkerDuty();
        },
        delService(item) {
            this.serviceData.map((v, i) => {
                if (v.id == item.id) {
                    this.serviceData.splice(i, 1);
                }
            });
        },
        // 在编辑状态下切换了服务人
        destroyEditing() {
            if (this.is_edit) {
                this.is_destroy_editing = "1";
            }
        },
        // 切换批量操作
        batchFun() {
            this.$confirm(
                `是否要切换${this.is_batch ? "单选操作" : "批量操作"}`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            )
                .then(() => {
                    this.is_batch = !this.is_batch;
                    this.selectIndex = [];
                    this.timestrList.map((v) => {
                        v.is_acitve = false;
                    });
                    this.hourList.map((v) => {
                        v.is_acitve = false;
                    });
                })
                .catch(() => {});
        },

        // 获取服务人信息
        getServiceData(data) {
            if (this.page_i == 3 || this.page_show_i == 3) {
                this.staffid = data.id;
                this.serviceData = [data];
                this.timestrList = [];
                this.hourList = [];
                this.selectIndex = [];
                this.getBookWorkerDuty(data);
            } else {
                if (this.selectType == 1) {
                    this.serviceData = data;
                } else {
                    this.serviceData.map((v, i) => {
                        if (v.id == this.upid) {
                            this.serviceData.splice(i, 1, data);
                        }
                    });
                }
            }
        },
        // 编辑的服务人信息
        getEditServiceData(data) {
            this.timestrList = [];
            this.hourList = [];
            this.selectIndex = [];
            this.staffid = data.staff_info.id;
            this.serviceData = [data.staff_info];
            this.getEditBookWorkerDuty(data);
        },

        // 获取编辑的日期/时间数据
        async getEditBookWorkerDuty(obj) {
            let url = config.YY_YUYUE_BOOK_WORKER_DUTY;
            let param = {
                staffid: this.staffid,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                res.data.hour_ls.map((vw) => {
                    vw.is_no_acitve = false;
                    vw.is_acitve = false;
                });
                if (res.data.timestr_ls) {
                    res.data.timestr_ls.map((v) => {
                        v.is_acitve = false;
                        if (obj.book_info.timestr === v.timestr) {
                            v.is_acitve = true;
                        }
                    });
                    this.timestrList = res.data.timestr_ls;
                }
                if (res.data.hour_ls) {
                    if (obj.hour_allow) {
                        obj.hour_allow.map((v) => {
                            if (v.timestr == obj.book_info.timestr) {
                                res.data.hour_ls.map((vw) => {
                                    vw.is_no_acitve = false;
                                    vw.is_acitve = false;
                                    v.hour.map((vs) => {
                                        if (vw.hour === vs) {
                                            vw.is_no_acitve = true;
                                        }
                                    });
                                });
                            }
                        });
                    }
                    res.data.hour_ls.map((v, i) => {
                        if (v.is_no_acitve) {
                            if (
                                Number(v.hour) >=
                                    Number(obj.book_info.h_from) &&
                                Number(v.hour) <= Number(obj.book_info.h_to)
                            ) {
                                v.is_acitve = true;
                                this.selectIndex = [i];
                            }
                        }
                    });
                    this.hourList = res.data.hour_ls;
                }
                this.prepareHourList = res.data.hour_ls;
                this.hourAllow = obj.hour_allow;
            }
        },
        // 获取新增日期/时间数据
        async getBookWorkerDuty(obj) {
            let url =
                this.page_i == 3 || this.page_show_i == 3
                    ? config.YY_YUYUE_BOOK_WORKER_DUTY
                    : config.YY_YUYUE_DUTY_ADD_INFO;
            let param = {
                staffid:
                    this.page_i == 3 || this.page_show_i == 3
                        ? this.staffid
                        : undefined,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.tlong = Number(res.data.tlong);
                let selectedDate = null;
                let selectTime = null;
                if (res.data.timestr_ls) {
                    res.data.timestr_ls.map((v) => {
                        v.is_acitve = false;
                        if (obj && obj.hasOwnProperty("timestr")) {
                            if (obj.timestr == v.timestr) {
                                v.is_acitve = true;
                                selectedDate = selectedDate = v;
                            }
                        }
                    });
                    this.timestrList = res.data.timestr_ls;
                }
                if (res.data.hour_ls) {
                    res.data.hour_ls.map((v) => {
                        v.is_acitve = false;

                        if (obj && obj.hasOwnProperty("h_from")) {
                            if (obj.h_from == v.hour) {
                                v.is_acitve = true;
                                selectTime = v;
                            }
                        }
                    });
                    if (this.page_i == 3 || this.page_show_i == 3) {
                        this.prepareHourList = res.data.hour_ls;
                    } else {
                        this.hourList = res.data.hour_ls;
                    }
                }
                if (res.data.hour_allow) {
                    this.hourAllow = res.data.hour_allow;
                }

                if (selectedDate) {
                    this.cheTimestr(selectedDate, selectTime);
                }
            }
        },
        // 选中日期
        cheTimestr(item, st) {
            this.timestrList.map((v) => {
                if (this.is_batch) {
                    if (v.timestr == item.timestr) {
                        v.is_acitve = !v.is_acitve;
                    }
                } else {
                    if (v.timestr == item.timestr) {
                        v.is_acitve = true;
                    } else {
                        v.is_acitve = false;
                    }
                }
            });

            if (this.page_i != 3 && this.page_show_i != 3) return;

            let selectTime = {};
            this.selectIndex = [];
            this.hourAllow.map((v) => {
                if (v.timestr == item.timestr) {
                    selectTime = v;
                }
            });
            this.prepareHourList.map((v, i) => {
                v.is_no_acitve = false;
                v.is_acitve = false;

                if (selectTime.hour) {
                    selectTime.hour.map((vs) => {
                        if (v.hour == vs) {
                            v.is_no_acitve = true;
                        }
                    });
                } else {
                    v.is_no_acitve = false;
                }

                if (v.is_no_acitve && st) {
                    if (st.hour == v.hour) {
                        v.is_acitve = true;
                        st.is_acitve = true;
                        this.selectIndex.push(i);
                    }
                }
            });
            this.hourList = this.prepareHourList;
        },
        //开始按
        gtouchstart(item,index){
            var self = this;
            this.timeOutEvent = setTimeout(function(){
                self.longPress(item,index)
            },500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
            return false;
        },
        //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
        gtouchend(item,index){
            clearTimeout(this.timeOutEvent);//清除定时器
            if(this.timeOutEvent!=0){
                //这里写要执行的内容（尤如onclick事件）
                this.cheHour(item,index);
            }
            return false;
        },
        //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
        gtouchmove(){
            clearTimeout(this.timeOutEvent);//清除定时器
            this.timeOutEvent = 0;

        },
        //真正长按后应该执行的内容
        longPress(item,index){
            this.timeOutEvent = 0;
            //执行长按要执行的内容，如弹出菜单
            this.hourList[index].is_acitve = false;
        },
       
        // 选中时间
        cheHour(item, index) {
            console.log('单击')
            if (
                !item.is_no_acitve &&
                (this.page_i == 3 || this.page_show_i == 3)
            ) return;
            let index_1 = "";
            let index_2 = "";
            this.selectIndex.push(index);
            if (this.selectIndex.length == 2) {
                index_1 = this.selectIndex[0];
                index_2 = index;
                if (index_1 < index_2) {
                    this.hourList.map((v, i) => {
                        if (i >= index_1 && i <= index_2) {
                            v.is_acitve = true;
                        } else {
                            v.is_acitve = false;
                        }
                    });
                } else {
                    this.hourList.map((v, i) => {
                        if (i <= index_1 && i >= index_2) {
                            v.is_acitve = true;
                        } else {
                            v.is_acitve = false;
                        }
                    });
                }
                this.selectIndex = [index_2];
            } else {
                index_1 = index;
                this.hourList.map((v, i) => {
                    if (i == index_1) {
                        console.log(v);
                        v.is_acitve = true;
                    }
                });
            }
        },
        // 打开服务人列表
        selectService(type, item = {}) {
            this.selectType = type;
            if (type == 2) {
                this.upid = item.id;
            }
            const data = {
                list: this.serviceData,
                selectType: type,
            };
            this.$refs.popServiceSelect.initData(data);
        },
        emptyData() {
            this.serviceData = [];
            this.timestrList = [];
            this.prepareHourList = [];
            this.hourList = [];
            this.hourAllow = [];
            this.staffid = "";
            this.selectIndex = [];
        },
    },
};
</script>

<style lang="scss">
.appointment-tiem {
    .select-content {
        border: 1px #e8dcdc solid;
        margin-bottom: 20px;
        .select-content-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            height: 30px;
            .ps {
                color: #949494;
                font-size: 12px;
                font-weight: 400;
                margin-left: 20px;
            }
            .title {
                font-size: 14px;
                font-weight: bold;
            }
            .but {
                .tis {
                    text-align: right;
                    span {
                        display: flex;
                        align-items: center;
                    }
                    .tis-2 {
                        &::before {
                            content: " ";
                            display: inline-block;
                            width: 10px;
                            height: 10px;
                            border: 1px #333333 solid;
                            margin-right: 10px;
                        }
                    }
                    .tis-3 {
                        &::before {
                            content: " ";
                            display: inline-block;
                            width: 12px;
                            height: 12px;
                            background: #e6e6e6;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }

        .content-box {
            border-top: 1px #e8dcdc solid;
            padding: 10px 0;
            font-size: 14px;
            .content-row {
                padding: 0 10px;
                border-bottom: 1px #e8dcdc solid;
                margin-bottom: 10px;
                padding-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 0;
                    border: none;
                }
                .content-info-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .info {
                        display: flex;
                        align-items: center;
                    }
                    .img-box {
                        width: 80px;
                        height: 80px;
                        margin-right: 10px;
                        border-radius: 5px;
                        overflow: hidden;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .content-info {
                        .content-title {
                            span {
                                margin-right: 10px;
                            }
                            .tag {
                                font-size: 12px;
                                padding: 0 3px 2px;
                                border: 1px #ff7b23 solid;
                                color: #ff7b23;
                                border-radius: 3px;
                            }
                        }
                        .content-dot {
                            span {
                                font-size: 12px;
                                color: #949494;
                                margin-right: 20px;
                            }
                        }
                    }
                }

                .content-but {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;
                    .content-num {
                        span {
                            margin-right: 10px;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        .date-box {
            display: flex;
            flex-wrap: wrap;
            border-top: 1px #e8dcdc solid;
            padding: 10px;
            .date-row {
                margin-right: 10px;
                margin-bottom: 10px;
                width: 80px;
                border: 1px #555555 solid;
                border-radius: 5px;
                color: #555555;
                padding: 5px 0;
                cursor: pointer;
                .date-txt {
                    text-align: center;
                }
                .date {
                    text-align: center;
                }
                &.tiem {
                    padding: 5px;
                }
                &.avitve {
                    border: none;
                    background: #3388ff;
                    color: #fff;
                    width: 82px;

                    &:hover {
                        background: #3388ff;
                    }
                }
                &.yas-avitve {
                    border: none;
                    background: #3388ff;
                    color: #fff;
                    padding: 6px;
                    &:hover {
                        background: #3388ff;
                    }
                }
                &.no-avitve {
                    border: none;
                    background: #e6e6e6;
                    padding: 6px;
                    &:hover {
                        background: #e6e6e6;
                    }
                }
                &:hover {
                    background: #f1f1f1;
                }
            }
        }
    }
}
</style>
